{% extends "admin/framework.twig" %}
{% block title %}
    <h1>
        菜单编辑
        <small>编辑侧边栏菜单</small>
    </h1>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-xs-2 col-xs-offset-10">
            <button type="button" href="./menu_edit/add" class="btn btn-block btn-primary" data-toggle="modal" data-target="#myModal"><i class='fa fa-user-plus'></i>添加新菜单项</button>
        </div>
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">菜单编辑</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="table" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>路由</th>
                            <th>类型</th>
                            <th>父级</th>
                            <th>优先级</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                </div>
                <!-- /.box-body -->
                <div id="Dialog" title="">
                    <iframe id="Dialog-iframe" frameborder="0" src="" width="100%" height="450"></iframe>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
{% endblock %}
{% block extend_scripts %}
    <script>
        $(document).ready(function () {
            table = $("#table").DataTable({
                "ajax": "./menu_edit/json",
                columns: [
                    {data: 'id'},
                    {data: 'title'},
                    {data: 'route'},
                    {data: 'class'},
                    {data: 'parent'},
                    {data: 'order'},
                    {data: ''}
                ],
                "columnDefs": [{
                    "targets": -1,
                    "render": function(data, type, row) {
                        var editUrl = './menu_edit/edit/' + row['id'];
                        var delUrl = './menu_edit/del/' + row['id'];
                        var editButton ='<button type="button" href="'+ editUrl +'" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal">编辑</button>';
                        var delbBtton = '<button type="button" href="'+ delUrl +'" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal">删除</button>';
                        return editButton + delbBtton;
                    }}],
                "order": [[ 5, "asc" ]],
                "language": {
                    "url": "../../assets/DataTables/js/jquery.dataTables-Chinese.json"
                }
            })
            //Modal关闭时时要清除数据，以便下次重新加载
            $("#myModal").on("hide.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
        });
    </script>
{% endblock %}